<meta charset  = "utf-8">
<button onclick ="yi()" id = "b1" >1</button>
<button onclick ="er()" id = "b2">2</button>
<button onclick ="san()" id = "b3">3</button>
<button onclick ="si()" id = "b4">4</button>
<button onclick ="wu()" id = "b5">5</button>
<button onclick = "da()">放大</button>
<button onclick = "xiao()">缩小</button>

<button onclick = "shang()">上一张</button>
<button onclick = "xia()">下一张</button>
<button onclick="zhuan()">旋转</button>

<hr />
<img  id = "pic" width = "500" src = "1.jpg" />
<script>

	function yi(){
	pic.src = "1.jpg";
	b1.style.color = "red";
}
function er(){
	pic.src = "2.jpg";
}
function san(){
	pic.src = "3.jpg";
}
function si(){
	pic.src = "4.jpg";
}
function wu(){
	pic.src = "5.jpg";
}
function da(){
	pic.width =pic.width*1.1 ;
}
function xiao(){
	pic.width =pic.width*0.9 ;
}

 var number = 1;
function shang(){
            number ++ ;
            if(number > 5){
                number = 1;
            }
	pic.src = number+".jpg"
}
function xia(){
 number -- ;
            if(number < 1){
                number = 5;
            }
            pic.src = number+".jpg";
	
}


var deg = 0;

    function zhuan(){
        deg += 90;
        pic.style.transform = "rotate("+deg+"deg)";
    }
</script>